<script setup>
import {ref} from 'vue';

const RecommendedCourse=ref([
    '1+X师资开班说明']);
    
const SelectedCourseImg=ref([
    { name: '1+X初级认证考试', src: new URL('../../assets/c1.jpg',import.meta.url).href, alt: 'c1' },
  {name:'1+X初级认证考试',src:'/src/assets/c1.jpg',alt:'c1'},
  {name:'1+X中级认证考试',src:'/src/assets/c2.jpg',alt:'c2'},
  {name:'1+X高级认证考试',src:'/src/assets/c3.jpg',alt:'c3'},
])

const RecommendedCourseImg=ref([
  {src:'/src/assets/course111.jpg',alt:'c1'},
  {src:'/src/assets/course119.jpg',alt:'c1'},
  {src:'/src/assets/course180.jpg',alt:'c1'},
])

</script>

<template>
  <div class="course_container">

    <div>
      <span style="font-weight:bold" class="demonstration">
        选择课程
      </span>
      <div style="width: 100%; height: 25px;"></div>
      <el-carousel :interval="auto" type="card" height="200px">
        <!-- interval='3000' -->

        <el-carousel-item v-for="(item, index) in SelectedCourseImg" :key="index">
          <div>
            <p>"Hello"</p>
            <el-image style="width: auto; height: 200px" :src="item.src" :fit="fit" />
          </div>
        </el-carousel-item>

      </el-carousel>
    </div>

    <div style="width: 5px; height: auto;"></div>
    <!-- 起到分隔作用 -->

    <div>
      <span style="font-weight:bold" class="demonstration">
        推荐课程
      </span>
      <div style="width: 100%; height: 25px;"></div>
      <el-carousel :interval="auto" type="card" height="200px">
        <el-carousel-item v-for="(item, index) in RecommendedCourseImg" :key="index">
          <el-image style="width: auto; height: 200px" :src="item.src" :fit="fit" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>


<style scoped>
.course_container {
  display: grid;
  grid-template-columns: 1fr 0.1fr 1fr;
  /* 两列，每列宽度相同 */
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
